<template>
 <div >
      <span class="item" 
      v-for="item in tabs" 
      @click="handler(item.id)" 
      :class="{item:true,isActive:item.isActive}"  
      :key="item.id">
      {{item.label}}
      </span>
  </div>
    
 
</template>

<script setup>
const props = defineProps(['tabs'])
const emits = defineEmits(['selected-item'])

const handler =id=>{
  emits('selected-item',id)
}

</script>

<style lang="scss" scoped>
  .isActive{
      background-color: #66ccff;
      color: white !important
  }
  .item{
      color: #66ccff;
      border-radius: 3px;
      box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
      padding: 3px 8px;
      margin: 0px 5px;
      cursor: pointer;
  }


</style>